<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end" :gutter="30">
        <el-col :span="4.8">
          <el-select v-model="selectSearch" placeholder="状态">
            <el-option label="待审核" :value="1"></el-option>
            <el-option label="审核通过" :value="2"></el-option>
            <el-option label="审核拒绝" :value="3"></el-option>
          </el-select>
        </el-col>

        <el-col :span="4.8">
          <el-input style="width:100%" v-model="selectCode" placeholder="用户姓名/手机号码"></el-input>
        </el-col>
        <el-col :span="4.8">
          <el-date-picker
            v-model="startDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="4.8">
          <el-date-picker
            v-model="endDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束日期"
          ></el-date-picker>
        </el-col>

        <el-col :span="4.8">
          <div style="display:flex">
            <el-button type="primary" @click="inquire">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="end">
          <el-col :span="2">
            <el-button type="success" @click="addcommodity">导出数据</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="bookMoney" label="提现金额" align="center"></el-table-column>
        <el-table-column prop="orderMoney" label="扣除宠币" align="center"></el-table-column>
        <el-table-column prop="userCurrencyBalance" label="剩余宠币" align="center"></el-table-column>
        <el-table-column label="收款方式" align="center">
          <template slot-scope="scope">{{scope.row.zfb='支付宝'}}</template>
        </el-table-column>
        <el-table-column prop="orderCreateTime" label="申请时间" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">{{Status(scope.row.orderStatus)}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button
              @click="lookcheck(scope.row)"
              type="primary"
              size="small"
              :disabled="scope.row.orderStatus == 1? false :true "
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        layout="total,  prev, pager, next, jumper"
        :total="total"
        :current-page="current"
          background
        @current-change="handleCurrentChange"
        style="margin-top:24px"
      ></el-pagination>
    </el-card>

    <!-- 弹窗审核 -->
    <el-dialog title="审核" :visible.sync="dialogVisible" width="25%" @close="closeDialog">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="审核" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/components/commom.js";
export default {
  data() {
    return {
      // 审核加载状态
      loading: false,
      dialogVisible: false, //弹窗审核
      ruleForm: {
        resource: ""
      },
      rules: {
        resource: [
          { required: true, message: "请选择审核是否通过", trigger: "change" }
        ]
      },
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      current: 1,
      total: 0,
      // 获取修改的状态
      updataOreder: {},
      //查询
      selectCode: "",
      startDate: "",
      endDate: "",
      selectSearch: "" //下拉查询
    };
  },
  mounted() {
    this.depositOrder();
  },
  methods: {
    //提现订单
    depositOrder() {
      var param = {
        selectCode: this.selectCode,
        startDate: this.startDate,
        endDate: this.endDate,
        current: this.current,
        status: this.selectSearch,
        orderType: 2,
        size: 10
      };
      this.$http.article.deposit(param).then(res => {
        //显示每页展示的数量
        res.result.records.forEach((item, index) => {
          //res.data.data.list 表格数据     forEach为每一项添加数据
          item.index = index + 1 + (this.current - 1) * 10;
          // this.currentPage当前页  this.pageParams.size 每页显示多少    :page-sizes="[10,20,30,50]" 分页大小

          return item;
        });
        this.tableData = res.result.records;
        this.total = res.result.total;
        console.log("获取提现订单列表", res);
      });
    },
    // 查询
    inquire() {
      this.current = 1; //模糊查询
      this.depositOrder();
    },
    // 重置
    reset() {
      this.selectCode = "";
      this.startDate = "";
      this.endDate = "";
      this.selectSearch = "";
      this.depositOrder();
    },
    // 审核
    lookcheck(val) {
      this.dialogVisible = true;
      this.updataOreder = val;
      console.log("val", val);
    },
    // 分页、
    handleCurrentChange(val) {
      this.current = val;
      this.depositOrder();
    },
    // 导出数据
    addcommodity() {
      console.log("导出");
      const hader = [
        {
          title: "姓名",
          date: "userName"
        },
        {
          title: "联系电话",
          date: "userPhone"
        },
        {
          title: "提现金额",
          date: "bookMoney"
        },
        {
          title: "扣除宠币",
          date: "orderMoney"
        },
        {
          title: "剩余宠币",
          date: "userCurrencyBalance"
        },
        {
          title: "收款方式",
          date: "zfb"
        },
        {
          title: "申请时间",
          date: "orderCreateTime"
        },
        {
          title: "状态",
          date: "orderStatus"
        }
      ];
      const excelName = "审核订单列表";
      let param = {
        size: this.total,
        orderType: 2,
        current: 1
      };
      this.$http.article.deposit(param).then(res => {
        console.log("获取res", res);
        const list = res.result.records.map(item => {
          //因为有枚举类型，所以这里对数据进行处理
          if (item.orderStatus) {
            item.orderStatus =
              item.orderStatus == 1
                ? "待审核"
                : item.orderStatus == 2
                ? "已通过"
                : "已拒绝";
          }
          item.zfb = "支付宝"; //收款方式
          return item;
        });
        export2Excel(hader, list, excelName);
      });
    },
    // 获取状态
    Status(val) {
      switch (val) {
        case 1:
          return "待审核";
          break;
        case 2:
          return "已通过";
          break;
        case 3:
          return "已拒绝";
          break;
      }
    },

    // 确定-审核
    submitForm(formName) {
      this.loading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = {
            orderId: this.updataOreder.orderId,
            orderStatus: this.ruleForm.resource
          };
          this.$http.article.updatEdeposit(param).then(res => {
            if (res.code == 200) {
              this.depositOrder();
              this.dialogVisible = false; //弹窗审核
              this.$message.success("请求成功");
              this.loading = false;
              // this.ruleForm.resource = "";
              this.resetForm("ruleForm");
            } else {
              this.depositOrder();
              this.dialogVisible = false; //弹窗审核
              this.loading = false;
              // this.ruleForm.resource = "";
              this.resetForm("ruleForm");
              this.$message.warning(res.msg);
            }
          });
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    // 关闭事件的回调
    closeDialog() {
      // this.ruleForm.resource = "";
      this.resetForm("ruleForm");
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;
  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
}
.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
  margin-top: 10px;
}
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>